<template>
    <div>
      <h2>修改</h2>
      <table class="table table-bordered">
        <tbody>
          <tr>
            <td>房型名称</td>
            <td>
              <input type="text" value="老七" />
            </td>
          </tr>
          <tr>
            <td>单价</td>
            <td>
              <input type="text" value="77" />
            </td>
          </tr>
          <tr>
            <td>室内面积</td>
            <td>
              <input type="text" value="777" />
            </td>
          </tr>
          <tr>
            <td>最多入住人数</td>
            <td>
              <input type="text" value="1" />
            </td>
          </tr>
          <tr>
            <td>图片</td>
            <td>
              <img :src="form.tupian" style="display: ''; max-width: 100px" />
              <input type="file" style="display: ''" id="file" @change="Tupian" />
            </td>
          </tr>
          <tr>
            <td>描述</td>
            <td>
              <textarea value="无"></textarea>
            </td>
          </tr>
          <tr>
            <td>是否有窗</td>
            <td>
              <input
                type="radio"
                
                name="youchuang"
                checked
              />有窗
              <input
                type="radio"
               
                name="youchuang"
                
              />没窗
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <button @click="Add">修改</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import axios from "axios";
  import { onMounted, reactive, ref } from "vue";
  import { useRouter } from "vue-router";
  import "bootstrap/dist/css/bootstrap.min.css";
  
  const router = useRouter();
  const form = reactive({
    id: 0,
    name: "",
    price: "",
    mianji: "",
    renshu: "",
    tupian: "",
    miaoshu: "",
    youchuang: "",
  });
  
  const Add=()=>{
    alert("修改成功");
    router.push("showfaug")
    //   if(!form.name){
    //       alert("名称不能为空");
    //       return;
    //   }
    //   if(!form.price){
    //       alert("单价不能为空");
    //       return;
    //   }
  
    //   axios.post("https://localhost:7088/api/fangxing/fangAdd",form).then(res=>{
    //       if(res.data>0){
    //           alert("添加成功");
    //           router.push("showfang")
    //       }
    //       else
    //       {
    //           alert("添加失败");
    //       }
    //   })
  
  }
  
  const Tupian=(e:any)=>{
      var formdata=new FormData();
      var file=e.target.files[0];
      formdata.append("file",file);
      axios.post("https://localhost:7088/api/fangxing",formdata).then(res=>{
          form.tupian=res.data;
      })
      .catch(err=>{
          console.log(err);
      })
  }
  
  
  
  </script>
  
  <style scoped></style>
  